<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部 根据编号搜索 -->
        <el-form ref="form" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  placeholder="根据编号搜索"
                  v-model="query.keyword"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18" style="text-align:right;">
              <el-button size="small" icon="el-icon-delete" @click="clear"
                >清除</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </el-form>
        <!-- alert 警告 -->
        <el-alert
          :title="`数据一共${this.tableData.length}条`"
          type="info"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" class="table">
          <!-- 编号 -->
          <el-table-column prop="id" label="编号"></el-table-column>
          <!-- 题型 -->
          <el-table-column label="题型">
            <template #default="scope">
              <p v-if="scope.row.questionType === '1'">单选</p>
              <p v-else-if="scope.row.questionType === '2'">多选</p>
              <p v-else>简答</p>
            </template>
          </el-table-column>
          <!-- 题型编号 -->
          <el-table-column label="题型编号">
            <template #default="scope">
              <div v-for="(item, index) in scope.row.questionIDs" :key="index">
                <p class="number" @click="preview(item.id)">{{ item.number }}</p>
              </div>
            </template>
          </el-table-column>
          <!-- 录入时间 -->
          <el-table-column prop="addTime" label="录入时间"></el-table-column>
          <!-- 答题时间 -->
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
          ></el-table-column>
          <!-- 正确率 -->
          <el-table-column
            prop="accuracyRate"
            label="正确率(%)"
          ></el-table-column>
          <!-- 录入人 -->
          <el-table-column prop="userName" label="录入人"></el-table-column>
          <!-- 操作按钮 -->
          <el-table-column label="操作">
            <template #default="scope">
              <!-- circle是否圆形按钮  plainb是否朴素按钮-->
              <el-button
                type="danger"
                circle
                plain
                icon="el-icon-delete"
                @click="delRandomsList(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="text-align: right; margin-top: 20px; margin-bottom: 15px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.pagesize"
          layout="prev, pager, next, sizes, jumper"
          background
          :total="counts"
        >
        </el-pagination>
      </el-card>
      <!-- 预览组件 -->
      <Perview  :dialogVisible="dialogVisible" @close="dialogVisible = false" :questionItem="questionItem"/>
    </div>
  </div>
</template>

<script>
import { getRandomsListApi, delRandomsListApi } from '../../api/hmmm/randoms'
import { detail } from '../../api/hmmm/questions'
// 引入预览组件
import Perview from '../components/questions-preview.vue'
export default {
  data () {
    return {
      questionItem: {},
      dialogVisible: false,
      // 组题列表列表
      tableData: [],
      // 查询参数
      query: {
        keyword: '',
        page: 1,
        pagesize: 10
      },
      // 总条数
      counts: 0
    }
  },
  components: {
    Perview
  },
  mounted () {
    this.getRandomsList()
  },
  methods: {
    // 预览
    async preview (id) {
      try {
        const { data } = await detail({ id })
        this.questionItem = data
        this.dialogVisible = true
      } catch (error) {
        this.$message.info('数据未找到')
        return error
      }
    },
    // 搜索按钮
    search () {
      this.query.page = 1
      this.getRandomsList()
    },
    // 清除按钮
    clear () {
      this.query.keyword = ''
      this.query.page = 1
      this.getRandomsList()
    },
    // 页码变化
    handleSizeChange (val) {
      // console.log(val)
      this.query.pagesize = val
      this.getRandomsList()
    },
    // 当前页变化
    handleCurrentChange (val) {
      // console.log(val)
      this.query.page = val
      this.getRandomsList()
    },
    // 获取组题列表
    async getRandomsList () {
      const res = await getRandomsListApi(this.query)
      // console.log('组题列表', res)
      this.tableData = res.data.items
      this.counts = res.data.counts
      // console.log(this.tableData)
    },
    // 删除组题列表
    async delRandomsList (row) {
      try {
        await this.$confirm('确定要删除此项内容吗?', '提示', {
          type: 'warning'
        })
        // console.log('@@', row)
        await delRandomsListApi(row)
        // 删除完成重新获取列表
        this.getRandomsList()
        this.$message.success('删除成功!')
      } catch (error) {
        this.$message.info('已取消删除')
      }
    }
  }
}
</script>

<style scoped>
.table {
  margin-top: 15px;
}
.number {
  color: #09f;
  cursor: pointer;
  line-height: 10px;
}
</style>
